
/*
 * grid.less
 * 栅格系统
 * @project: common/widget/grid
 * @author: zuopengfei01
 * @date: 2015.11.21
 *
 */


// 基于百分比、左浮动的网格系统
// 例子:
// <ul class="ui-row">
//     <li class="ui-col ui-col-50">50</li>
//     <li class="ui-col ui-col-50">50</li>
//     <li class="ui-col ui-col-25">25</li>
//     <li class="ui-col ui-col-75">75</li>
//     <li class="ui-col ui-col-33">33</li>
//     <li class="ui-col ui-col-67">67</li>
//     <li class="ui-col ui-col-20">20</li>
//     <li class="ui-col ui-col-80">80</li>
//     <li class="ui-col ui-col-10">10</li>
//     <li class="ui-col ui-col-90">90</li>
// </ul>
//---------------------------------------------------------------------------
.ui-row{
    display: block;
    overflow: hidden;
}
.ui-col {
    float: left;
    box-sizing: border-box;
    width: 100%;
}
.ui-col-10 {
    width: 10%;
}
.ui-col-20 {
    width: 20%;
}
.ui-col-25 {
    width: 25%;
}
.ui-col-33 {
    width: 33.3333%;
}
.ui-col-50 {
    width: 50%;
}
.ui-col-67 {
    width: 66.6666%;
}
.ui-col-75 {
    width: 75%;
}
.ui-col-80 {
    width: 80%;
}
.ui-col-90 {
    width: 90%;
}

// 横排flex网格
// 例子:
// <div class="ui-row-flex ui-whitespace">
//     <div class="ui-col ui-col">平均分</div>
//     <div class="ui-col ui-col">平均分</div>
//     <div class="ui-col ui-col">平均分</div>
//     <div class="ui-col ui-col">平均分</div>
// </div>
// <div class="ui-row-flex ui-whitespace">
//     <div class="ui-col ui-col-2">2/3</div>
//     <div class="ui-col">1/3</div>
// </div>
// <div class="ui-row-flex ui-whitespace">
//     <div class="ui-col ui-col-3">3/4</div>
//     <div class="ui-col">1/4</div>
// </div>
// <div class="ui-row-flex ui-whitespace">
//     <div class="ui-col ui-col-4">4/5</div>
//     <div class="ui-col">1/5</div>
// </div>
// <div class="ui-row-flex ui-whitespace">
//     <div class="ui-col ui-col-3">3/5</div>
//     <div class="ui-col ui-col-2">2/5</div>
// </div>
//----------------------------------------------------------------------------------------
.ui-row-flex{
    display: -webkit-box;
    width: 100%;
    .ui-col{
        float: none;
        -webkit-box-flex: 1;
        width: 0;
    }
    .ui-col-2{
        -webkit-box-flex: 2;
    }
    .ui-col-3{
        -webkit-box-flex: 3;
    }
    .ui-col-4{
        -webkit-box-flex: 4;
    }
}

// 竖排flex网格
// 例子:
// <div class="ui-row-flex ui-whitespace ui-row-flex-ver">
//     <div class="ui-col">1/2</div>
//     <div class="ui-col">1/2</div>
// </div>
// <br>
// <div class="ui-row-flex ui-whitespace ui-row-flex-ver">
//     <div class="ui-col ui-col-3">3/4</div>
//     <div class="ui-col">1/4</div>
// </div>
// ----------------------------------------------------------------------------------------
.ui-row-flex-ver{
    -webkit-box-orient: vertical;
    .ui-col{
        width: 100%;
        height: 0;
    }
}
